<!-- 个人信息数据 -->
<template>
  <border noMore noborder cardTitle="个人信息数据">
    <div class="info">
      <div class="list">
        <div class="item" v-for="(item, index) in list" :key="index">
          <img :src="`/img/dashboard/${item.icon}`" alt="" />
          <span>{{ item.text }}</span>
        </div>
      </div>
      <div class="list">
        <div class="flex-1">
          <span>签约状态：</span>
          <span class="bold">已签约</span>
        </div>
        <div class="flex-1">
          <span>随访时间：</span>
          <span class="bold">6月15日</span>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import border from "./border.vue";
import StatisticsMixins from "../StatisticsMixins";
export default {
  name: "BaseInfo",
  mixins: [StatisticsMixins],
  components: { border },
  data () {
    return {
      list: [
        {
          icon: "icon01.png",
          text: "张三"
        },
        {
          icon: "icon02.png",
          text: "男"
        },
        {
          icon: "icon03.png",
          text: "47"
        },
        {
          icon: "icon04.png",
          text: "176cm"
        },
        {
          icon: "icon05.png",
          text: "60kg"
        },
        {},
        {
          icon: "icon06.png",
          text: "3-5根"
        },
        {
          icon: "icon07.png",
          text: "500ml"
        },
        {}
      ]
    };
  }
};
</script>

<style scoped>
.info {
  font-size: 0.18rem;
  padding: 0.15rem;
}
.list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: #fff;
  .item {
    width: 1.4rem;
    display: flex;
    align-items: center;
    padding: 0.14rem 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    height: 0.46rem;
    font-size: 0.2rem;
    img {
      width: 0.18rem;
      height: 0.18rem;
      margin-right: 0.2rem;
      display: block;
    }
    &:nth-child(3n + 2) {
      width: calc(100% - 2.8rem);
      text-align: center;
      padding-left: 0.45rem;
      border-left: 1px solid rgba(255, 255, 255, 0.22);
      border-right: 1px solid rgba(255, 255, 255, 0.22);
    }
    &:nth-child(3n) {
      padding-left: 0.2rem;
    }
  }
  .flex-1 {
    padding-top: 0.14rem;
    padding-left: 0.05rem;
    font-size: 0.18rem;
    & + .flex-1 {
      border-left: 1px solid rgba(255, 255, 255, 0.22);
      padding-left: 0.22rem;
    }
		.bold{
			font-weight: 500;
		}
  }
}
</style>
